<template>
  <view class="p-2">
    <view
      v-for="(item, index) in moviegoerList"
      :key="index"
      class="border border-gray-100 rounded flex items-center justify-between p-2"
    >
      <view>
        <text class="font-bold">{{ item.vieuserName }}</text>
        <view class="text-zinc-300 text-xs flex items-center mt-1">
          <text>
            {{ item.vieuserIdentityType }}
          </text>
          <view class="ml-2">{{ item.vieuserIdentity }}</view>
        </view>
        <view class="text-zinc-300 text-xs flex items-center mt-1">
          <view>手机号</view>
          <view class="ml-2">{{ item.vieuserPhone }}</view>
        </view>
      </view>
      <view>
        <text class="material-icons text-zinc-300">delete</text>
      </view>
    </view>
    <!--注释-->
    <view class="pay-desk">
      <u-button :custom-style="{ width: '100%' }" shape="circle" type="primary" @click="routerPath">
        添加观影人
      </u-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { MOVIEGOER } from '@/api/moviegoer';
import { onReady } from '@dcloudio/uni-app';
import { RequestInterface } from '@/typings/request';

const $http: RequestInterface = inject('$http') as RequestInterface;
const moviegoerList = ref([
  {
    vieuserName: '骆超',
    vieuserIdentityType: '身份证',
    vieuserIdentity: '420583200105112811',
    vieuserPhone: '173642685756'
  }
]);

// 获取观影人列表
const getMoviegoerList = () => {
  $http.post({
    url: MOVIEGOER.LIST_VITE_USER,
    success: (res) => {
      moviegoerList.value = res;
    }
  });
};

// 下拉选取消
const routerPath = () => {
  uni.$u.route({
    url: '/pages/my/addMoviegoer'
  });
};

onReady(() => {
  getMoviegoerList();
});
</script>

<style lang="scss" scoped>
.pay-desk {
  @apply h-20 font-bold flex items-center justify-between p-5 fixed bottom-0 left-0 w-full;
}
</style>
